<template>
  <div>
    <div v-if="dataList.length !== 0">
      <div class="header">
        <div>柯桥行政事业单位资产清查盘盈处置备案表</div>
      </div>
      <div class="container">
        <div style="display: flex;font-size: 10px;">
          <div style="flex:3">填报单位: {{ dataList[0].enterpriseName }}</div>
          <div style="flex:1;text-align: right;">金额:元 共1页</div>
        </div>
        <div class="tableWrap">
          <!--  -->
          <vxe-table
            :height="initHeight"
            :data="dataList"
            border
            resizable
            show-overflow
            style="width: 100%"
            show-footer-overflow
            show-footer
            :footer-method="footerMethod"
            :header-cell-style="{
              'font-size': '13px',
              'font-weight': '400',
              'background-color': 'rgb(64, 158, 255)',
              color: '#fff',
              'text-align': 'center',
              'line-height': '14px',
            }"
            :cell-style="{
              'text-align': 'center',
              'font-size': '12px',
              'line-height': '14px',
            }"
          >
            <vxe-table-column fixed="left" type="seq" title="序号" width="40" />
            <vxe-table-column
              fixed="left"
              title="单位"
              width="110"
              field="enterpriseName"
            />
            <vxe-table-column
              field="name"
              title="盘盈资产名称及型号规格"
              width="100"
            />
            <vxe-table-column field="count" title="盘盈资产数量" width="100" />
            <vxe-table-column title="盘盈资产价值确定">
              <vxe-table-column
                field="originalValue"
                title="原始凭证价值"
                width="130"
              />
              <vxe-table-column
                field="sameProductValue"
                title="同类商品价值"
                width="130"
              />
              <vxe-table-column
                field="assessValue"
                title="评估价值"
                width="130"
              />
            </vxe-table-column>
            <vxe-table-column
              field="reason"
              title="分析说明资产盘盈原因"
              width="200"
            />
            <vxe-table-column field="remark" title="备注" width="150" />
          </vxe-table>
        </div>
      </div>
    </div>
    <div v-else style="text-align: center;">
      <image
        mode="aspectFit"
        style="height: 500px;width: 300px;"
        src="../../../../../static/img/loading.png"
      />
    </div>
  </div>
</template>

<script>
/*eslint-disable*/
import XEUtils from "xe-utils";
export default {
  props: {
    dataList: {
      type: Array,

      default: () => {
        return [];
      },
    },
  },

  data() {
    return {
      loading: false,
      tableData: [],
      initHeight: "",
    };
  },

  created() {
    this.initHeight = document.body.clientHeight - 180;
  },
  methods: {
    footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex == 0) {
            return "合计";
          } else {
            if (
              column.property == "remark" ||
              column.property == "dutyReason" ||
              column.property == "reason" ||
              column.property == "name" ||
              column.property == "enterpriseName"
            ) {
              return "--";
            } else {
              return XEUtils.sum(data, column.property);
            }
          }
        }),
      ];

      return footerData;
    },
  },
};
</script>

<style scoped lang="less">
.tableWrap /deep/ .vxe-table .vxe-cell {
  white-space: pre-line;
  word-break: break-all;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.tableWrap /deep/ .vxe-table .vxe-header--column:not(.col--ellipsis) {
  padding: 5px 0;
  overflow-x: auto;
}

.header {
  text-align: center;
  text-align: center;
  font-size: 16px;
  margin-top: 5px;
}

.dateTitle {
  margin-top: 8px;
  font-size: 13px;
  color: gray;
}

.container {
  margin-top: 5px;
  padding: 5px 10px;
  background: #fff;
  margin: 8px 0px;
}

.tableWrap {
  margin-top: 10px;
}
</style>
